<template>
    <div class="edtiArticle">
        <div class="drawerTop">
            <el-form label-width="82px" size="default" :rules="editFormRules" :model="editForm" ref="editFormRef">
                <div class="title">设置管理</div>
                <div class=seetingBox>
                    <el-form-item label="学校logo" prop="logo">
                        <!-- 图片裁剪 -->
                        <CropperImage :avatar="editForm.logo" @changeImage="changeImage" @clearImage="clearImage"
                            :width="283" :height="60" :autoCropWidth="420" :autoCropHeight="60" dir="school_logo"
                            :needCropper="false">
                        </CropperImage>
                        <div class="tips">
                            <el-image :src="icon_tishi" width="20"></el-image>
                            建议上传大小为420 * 60 像素,上传png/jpeg/jpg等格式
                        </div>
                    </el-form-item>
                    <el-row style="align-items: baseline;" :gutter="15" v-for="(item, index) in editForm.module"
                        :key="index">
                        <el-col :span="19">
                            <el-form-item label="模块名称" :prop="`module.${index}.name`" :rules="{
                                required: true,
                                message: '请输入模块名称',
                                trigger: 'blur'
                            }">
                                <el-input v-model="item.name" style="width:100%;" placeholder="请输入模块名称">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="展示" prop="is_show" label-width="40px" style="margin-bottom: 12px;">
                                <el-switch v-model="item.is_show" :active-value="1" size="small" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="4">
                            <el-form-item label="外链" prop="is_link" label-width="45px" style="margin-bottom: 12px;">
                                <el-switch v-model="item.is_link" :active-value="1" size="small" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="评论" label-width="50px" prop="can_comment" size="small"
                                style="margin-bottom: 12px;">
                                <el-switch v-model="item.can_comment" :active-value="1" :inactive-value="0"
                                    active-color="#00BE65" inactive-color="#C5C5C5">
                                </el-switch>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="24" v-if="Number(item.is_link) == 1">
                            <el-form-item label="" :prop="`module.${index}.url`" :rules="{
                                required: true,
                                message: '请输入外链地址',
                                trigger: 'blur'
                            }">
                                <el-input v-model="item.url" style="width:100%;" placeholder="请输入外链地址">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div class="fixed-btn-box2">
                <el-button type="primary" @click="submitForm(editFormRef)">保存更改</el-button>
                <el-button type="primary" class="white-bg-btn" plain @click="resetForm(editFormRef)">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, h, onMounted, reactive, watch, toRaw } from 'vue'
import icon_tishi from '../../../assets/images/icon_tishi.png'
import { editSitecfgCfg } from '../../Api/Setting'
interface PropsType {
    infoData?: any
    currentType?: string
    id?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    infoData: {},
    id: '',
    currentType: ''
})
interface EmitType {
    (e: 'getConfig'): void
    (e: 'getConfigInfo', data: any): void
}
const emit = defineEmits<EmitType>()
const editForm = ref<any>({
    logo: '',
    module: [
        {
            id: '',
            name: '',
            is_show: 1,
            // can_comment: 1,
            // is_link: 0
        }
    ]
})
const editFormRef = ref<FormInstance>()
const editFormRules = reactive<FormRules>({
    logo: [{ required: true, message: '请上传学校logo', trigger: 'blur' }],
    name: [{ required: true, message: '请输入模块名称', trigger: 'blur' }]
})
const changeImage = (res: any) => {
    editForm.value.logo = res.inch
}
const clearImage = () => {
    editForm.value.logo = ''
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: any) => {
        if (valid) {
            const res: any = await editSitecfgCfg({ id: props.id, cfg_val: JSON.stringify(editForm.value) })
            if (res.code !== 1) return ElMessage.error(res.msg)
            ElMessage.success(res.msg)
            emit('getConfig')
            setTimeout(() => {
                if (props.infoData && Object.keys(props.infoData).length !== 0) {
                    editForm.value = JSON.parse(JSON.stringify(props.infoData))
                }
            }, 500)
        } else {
            console.log('error submit!')
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    emit('getConfig')
    if (props.infoData && Object.keys(props.infoData).length !== 0) {
        editForm.value = JSON.parse(JSON.stringify(props.infoData))
    }
    formEl.resetFields()
}
watch(
    () => editForm.value,
    (newVal: any, oldVal: any) => {
        emit('getConfigInfo', JSON.stringify(editForm.value))
    },
    { deep: true, immediate: true }
)
onMounted(() => {
    if (props.infoData && Object.keys(props.infoData).length !== 0) {
        editForm.value = JSON.parse(JSON.stringify(props.infoData))
    }
})
defineExpose({ editForm, submitForm, editFormRef })

</script>
<style lang="scss" scoped>
.edtiArticle {
    height: 100%;

    .drawerTop {
        height: 100%;
        position: relative;
        .el-form {
                height: 100%;
            }

        .title {
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #E4E4E4;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            padding: 0 20px;
        }

        .seetingBox {
            padding: 20px;
            height: calc(100% - 130px);
            overflow-y: scroll;
            box-sizing: border-box;

            .tips {
                display: flex;
                font-size: 12px;
                align-items: center;

                .el-image {
                    display: flex;
                    align-items: center;
                    margin-right: 5px;
                }
            }
        }
    }

    .fixed-btn-box2 {
        left: 0px;
        right: 0px;
        position: absolute;
        bottom: 0px;
        box-shadow: 0px -3px 4px 1px rgba(0, 0, 0, 0.06);

        .el-button {
            margin: 15px;
            margin-right: 15px;
            margin-left: 0px;
            float: right;
        }
    }
}
</style>